﻿@model WebChat.Models.MessageFormViewModel
           
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/form.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/tooltip.js")"></script>
<script type="text/javascript">

    $(document).ready(function(){
    
    addUserToChat(function(areUserInChat)
    {
        if(areUserInChat == true)
        {
            alert("Du er allerede i dette rommet, du vil nå bli kastet ut. Er du logget inn via mobil må du skrive hnd \"romid\" stop, til 26112");
            window.location = "../../Channel/";
            
        }
        else
        {
            $(window).unload(function(){removeUserFromChat();});
        }
    });
    getUsersInChat(function(users)
        {      
            var strUser="<div id=\"UserList\">";
            $.each(users, function(index, user){
                strUser += "<div id=\"user\""+index+">";
                strUser += "<h3> <img height=\"40\" width=\"40\" id=\"img\" src=\"../../Message/Image/"+user.imageId+"\" alt=\"my image\" onmouseover=\"showtrail(800, 600, '/Message/Image/"+user.imageId+"')\" onmouseout=\"hidetrail()\" />"
                strUser += "    "+user.UserName+"</h3>";
                strUser += "</div>";
           });
           strUser += "</div>";
           $("#UserList").html(strUser);
        });
    
    setInterval(function(){
        getUsersInChat(function(users)
        {      
            var strUser="<div id=\"UserList\">";
            $.each(users, function(index, user){
                strUser += "<div id=\"user\""+index+">";
                strUser += "<h3> <img height=\"40\" width=\"40\" id=\"img\" src=\"../../Message/Image/"+user.imageId+"\" alt=\"my image\" onmouseover=\"showtrail(800, 600, '/Message/Image/"+user.imageId+"')\" onmouseout=\"hidetrail()\" />"
                strUser += "    "+user.UserName+"</h3>";
                strUser += "</div>";
           });
           strUser += "</div>";
           $("#UserList").html(strUser);
        });
        }, 5000);
        });

        


        function addUserToChat(callback)
        {
            $.ajax({
            url: "../../api/RoomApi/AddUserToChat/"+"@Model.chat.Id",
            data: {},
            type: "POST",
            contentType: "application/json;charset=utf-8"
            }).then (function(response)
            {
                callback(response);
            });
        }

        function getUsersInChat(callback)
        {
            $.ajax({
            url: "../../api/RoomApi/GetUsersInChat/"+"@Model.chat.Id",
            data: {},
            type: "GET",
            contentType: "application/json;charset=utf-8",
            }).then (function(response)
            {
                callback(response);
            });
        }

        function removeUserFromChat()
        {
            $.ajax({
            url: "../../api/RoomApi/RemoveUserFromChat/"+"@Model.chat.Id",
            data: {},
            type: "POST",
            contentType: "application/json;charset=utf-8",
            async: false
            });
            return "disconnected";
        }

</script>

<fieldset>
    <legend>Chatroom</legend>
    <div class="display-label">Navn</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.chat.Name)
    </div>
    <div class="display-label">Id</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.chat.Id)
    </div>
    <div class="display-label">Offentlig</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.chat.IsPublic)
    </div>

    <div class="display-label">Eier</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.owner.UserName)
    </div>

    <div class="display-label">Dato</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.chat.Date)
    </div>
</fieldset>
<fieldset id="Users">
    <legend>Users chatting</legend>
    <div id="UserList"></div>
</fieldset>